<template>
  <div class="bar-chart" :style="{ height: props.height }">
    <div ref="chartRef" class="chart-canvas"></div>
    <div v-if="isEmpty" class="empty-overlay">暂无数据</div>
  </div>
</template>

<script setup lang="ts">
  import { useChartOps, useChart } from '@/composables/useChart'
  import { getCssVariable } from '@/utils/colors'
  import { EChartsOption } from 'echarts'
  import * as echarts from 'echarts'

  const {
    chartRef,
    isDark,
    initChart,
    updateChart,
    getAxisLineStyle,
    getAxisLabelStyle,
    getAxisTickStyle,
    getSplitLineStyle
  } = useChart()

  interface Props {
    data?: number[][]
    xAxisData?: string[]
    color?: string
    height?: string
    barWidth?: string | number
    showAxisLabel?: boolean
    showAxisLine?: boolean
    showSplitLine?: boolean
  }

  const props = withDefaults(defineProps<Props>(), {
    data: () => [
      [],
      [],
      []
    ],
    xAxisData: () => [],
    color: '',
    // height: useChartOps().chartHeight,
    height: '100%',
    barWidth: '40%',
    showAxisLabel: true,
    showAxisLine: true,
    showSplitLine: true
  })

  const isEmpty = computed(() => {
    const hasXAxis = Array.isArray(props.xAxisData) && props.xAxisData.length > 0
    const totalLength = Array.isArray(props.data)
      ? props.data.reduce((sum, arr) => sum + (Array.isArray(arr) ? arr.length : 0), 0)
      : 0
    return !hasXAxis || totalLength === 0
  })

  const options: () => EChartsOption = () => {
    const computedColor =
      props.color ||
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: getCssVariable('--el-color-primary-light-4')
        },
        {
          offset: 1,
          color: getCssVariable('--el-color-primary')
        }
      ])
    return {
      grid: {
        top: 15,
        right: 0,
        bottom: 50,
        left: 0,
        containLabel: true
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        top:'bottom',
        data: ['进入', '离开', '经过']
      },
      xAxis: {
        type: 'category',
        data: props.xAxisData,
        axisTick: getAxisTickStyle(),
        axisLine: getAxisLineStyle(props.showAxisLine),
        axisLabel: getAxisLabelStyle(props.showAxisLabel)
      },
      yAxis: {
        min: 0,
        axisLabel: getAxisLabelStyle(props.showAxisLabel),
        axisLine: getAxisLineStyle(props.showAxisLine),
        splitLine: getSplitLineStyle(props.showSplitLine)
      },
      series: [
        {
          name:'进入',
          data: props.data[0],
          type: 'line',
          itemStyle: {
            borderRadius: 4,
          },
          barWidth: props.barWidth
        },
        {
          name:'离开',
          data: props.data[1],
          type: 'line',
          itemStyle: {
            borderRadius: 4,
          },
          barWidth: props.barWidth
        },
      ]
    }
  }

  watch(isDark, () => {
    return updateChart(options())
  })
  watch(
    () => ({ data: props.data, x: props.xAxisData }),
    () => {
      return updateChart(options())
    },
    { deep: true }
  )

  onMounted(() => {
    return initChart(options())
  })
</script>

<style scoped>
.bar-chart {
  position: relative;
  width: 100%;
}

.chart-canvas {
  width: 100%;
  height: 100%;
}

.empty-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
  background: transparent;
  pointer-events: none;
}
</style>
